<template>
    <view class="goods-card-main">
        <view class="goods-list">
            <view
                class="goods-item"
                :class="props.currentIndex === 0 ? 'goods-item-ing' : ''"
                @click="clickGoodsCard(props.goodsMes)">
                <view class="goods-header">
                    <view class="goods-img">
                        <image
                            :src="props.goodsMes.coverImg || defaultImg"
                            class="img"
                            @error="imageError(index)"></image>
                    </view>
                    <view class="goods-info">
                        <view class="goods-info-name">{{ props.goodsMes.goodsName }}</view>
                        <view class="spec-attr">{{ props.goodsMes.specAttr }}</view>
                        <view class="goods-info-price">
                            <view class="price-box"
                                >拼团价 ￥<text class="price">{{ priceNum(props.goodsMes.skuSpellPrice, 0) }}</text>
                                <text v-if="priceNum(props.goodsMes.skuSpellPrice, 1)"
                                    >.{{ priceNum(props.goodsMes.skuSpellPrice, 1) }}</text
                                ></view
                            >
                            <view class="old-price">￥{{ floatDivide(props.goodsMes.skuPrice, 100) }}</view>
                        </view>
                    </view>
                </view>
                <!-- 拼团进行中显示倒计时 -->
                <view v-if="props.currentIndex === 0" class="goods-footer">
                    <view class="label"
                        >距拼单结束：<text class="time"
                            >{{ Data.curHours }}:{{ Data.curMinutes }}:{{ Data.curSeconds }}</text
                        ></view
                    >
                    <button open-type="share" :data-item="props.goodsMes" catchtap="share" class="share-btn">
                        邀请好友参团
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import router from '@/router';
import { floatDivide, getImgOssUrl, getDiffTimeInfo, format } from '@/commons/utils.js';

const props = defineProps({
    currentIndex: {
        type: Number,
        default: 0
    },
    goodsMes: {
        type: Object,
        default: () => ({})
    }
});

const defaultImg = ref(getImgOssUrl('/ui-prod-2.0.0/errorImg.png'));
const Data = reactive({
    timer: null,
    curHours: '00',
    curMinutes: '00',
    curSeconds: '00'
});

const priceNum = (amount, index) => {
    let price = floatDivide(amount, 100);
    let list = [];
    try {
        list = price.toString().split('.');
    } catch (e) {
        list = [Number(price)];
    }
    return list[index];
};

onMounted(() => {
    const { surplusTime, activityStartTime, activityEndTime } = props.goodsMes;
    // 若拼团有效期<=活动剩余有效期，取拼团有效期倒计时 -->（开始时间：activityStartTime + 拼团有效期：surplusTime）
    // 若拼团有效期>活动剩余有效期，取活动剩余有效期倒计时 --> 活动结束时间：activityEndTime
    const endJoinTime =
        surplusTime <= activityEndTime - activityStartTime ? surplusTime + activityStartTime : activityEndTime;
    const endTime = format(endJoinTime * 1000);
    Data.timer = setInterval(() => {
        handleCountDown(endTime);
    }, 1000);
});

onUnmounted(() => {
    clearInterval(Data.timer);
});

const handleCountDown = timeData => {
    const timeInfo = getDiffTimeInfo(format(new Date()), format(timeData));
    const { curHours, curMinutes, curSeconds, millisecondDiff } = timeInfo;
    Data.curHours = curHours;
    Data.curMinutes = curMinutes;
    Data.curSeconds = curSeconds;
    if (millisecondDiff <= 0) {
        clearInterval(Data.timer);
    }
};

const clickGoodsCard = val => {
    router.push({
        path: '/pages-cart/group/index',
        query: {
            spellOrderId: val.spellOrderId
        }
    });
};

const imageError = e => {};
</script>
<style lang="scss" scoped>
.goods-card-main {
    .goods-list {
        .goods-item {
            margin-bottom: 18rpx;
            background: #ffffff;
            padding: 29rpx;
            .goods-header {
                display: flex;
                .goods-img {
                    width: 200rpx;
                    height: 200rpx;
                    margin-right: 22rpx;
                    border-radius: 7rpx;
                    overflow: hidden;
                    .img {
                        width: 200rpx;
                        height: 200rpx;
                    }
                }

                .goods-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding: 10rpx 0;
                    .goods-info-name {
                        display: -webkit-box;
                        overflow: hidden;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        max-width: 489rpx;
                        height: 80rpx;
                        margin-bottom: 10rpx;
                        font-size: 32rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #33302d;
                        line-height: 40rpx;
                    }
                    .spec-attr {
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        line-height: 26rpx;
                        margin-bottom: 14rpx;
                    }
                    .goods-info-price {
                        display: flex;
                        align-items: flex-end;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #fe292b;
                        line-height: 22rpx;
                        .price-box {
                            margin-right: 7rpx;
                            .price {
                                font-size: 25rpx;
                                font-weight: bold;
                            }
                        }

                        .old-price {
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #969696;
                            line-height: 20rpx;
                            text-decoration: line-through;
                        }
                    }
                }
            }
            .goods-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 123rpx;
                border-top: 2rpx solid #f5f5f5;
                margin-top: 29rpx;

                .label {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 31rpx;
                    .time {
                        color: #fe292b;
                    }
                }
                .share-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 210rpx;
                    height: 65rpx;
                    margin: 0;
                    background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
                    border-radius: 33rpx;
                    font-size: 25rpx;
                    color: #ffffff;
                }
            }
        }
        .goods-item-ing {
            padding: 29rpx 29rpx 0 29rpx;
        }
    }
}
</style>
